/**
 * @Description: 云卡首页
 * @author tao.xie
 * @date 2019-02-22
 */

import React from 'react'
import { Button, Dimensions, ScrollView, StyleSheet, View } from 'react-native'
import XBBaseAppPage from '../../src/frame/XBBaseAppPage.js'
import { getCardList } from '../api/CardInfoApi'
import instanceCardModule from '../CardModuleInstanceFactory'
import NotLoginModule from '../components/cardmodule/impl/NotLoginModule'
import { CARDSTATE } from '../model/CardInfoModel'

export default class CardInfo extends XBBaseAppPage {
  static navigationOptions = ({ navigation }) => {
    return {
      headerTitle: navigation.getParam('navTitle'),

      headerLeft: (
        <Button onPress={() => navigation.dismiss()} title="关闭"/>
      ),

      headerRight: (
        navigation.getParam('cardstate', CARDSTATE.CARD_STATE_DEFAULT) === CARDSTATE.CARD_STATE_OPEN
          ? <Button onPress={navigation.getParam('pushToCustomRecordList')} title="消费记录"/> : null
      )
    }
  }

  constructor (props) {
    super(props)

    this.state = {
      ...this.state,
      state: CARDSTATE.CARD_STATE_DEFAULT,
      cardno: '',
      cardlist: []
    }

    this.currentPage = 0
  }

  _refreshWhenLoginStateChanged = () => {
    this._getCardList()
  }
  _refreshOnResume = () => {
    this.refs['cardmodule' + this.currentPage].isOnScreen(false)
    this._getCardList()
  }

  componentWillMount (): void {
    super.componentWillMount()
    this._getCardList()

    this.props.navigation.setParams({ pushToCustomRecordList: this._pushToCustomRecordList })
  }

  _getCardList = async () => {
    try {
      let list = await getCardList()
      this.setState({ cardlist: Object.assign([], list) }, () => {
        this._bindCardUIByIndex()
      })
    } catch (err) {
      this.setState({ isLogin: false })
    }
  }

  _bindCardUIByIndex = () => {
    let cp = this.currentPage
    for (let index = 0; index < this.state.cardlist.length; index++) {
      let ref = this.refs['cardmodule' + index]
      if (ref) {
        ref.isOnScreen(false)
        if (index === cp) {
          ref.isOnScreen(true)
          this.props.navigation.setParams({ navTitle: ref._getCardInfo().cardname })
          this.props.navigation.setParams({ cardstate: ref._getCardInfo().state })
          this.setState({ cardno: ref._getCardInfo().cardno })
        }
      }
    }
  }

  _pushToCustomRecordList = () => {
    this.props.navigation.push('CustomRecordList', { cardno: this.state.cardno })
  }

  _onAnimationEnd = (e) => {
    let width = Dimensions.get('window').width
    let offSetX = e.nativeEvent.contentOffset.x
    this.currentPage = offSetX / width
    this._bindCardUIByIndex()
  }

  render () {
    if (this.state.isLogin === true) {
      return (
        <View style={styles.container}>
          <ScrollView horizontal pagingEnabled
                      ref={'scrollview'}
                      onMomentumScrollEnd={this._onAnimationEnd}>
            {
              this.state.cardlist.map((item, index) => instanceCardModule(item, index))
            }
          </ScrollView>
        </View>)
    } else {
      return (
        <View style={styles.container}>
          <NotLoginModule/>
        </View>
      )
    }
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  }
})